<template>
	<view class="tab_container">
		<view class="tab_container_btn_box">
			<view class="tab_container_btn" @click="go_page(url.homeURL)">
				<view v-if="index == 1" class="tab_container_btn_img"><image src="./img/home_active.png" mode="widthFix"></image></view>
				<view v-else class="tab_container_btn_img"><image src="./img/home.png" mode="widthFix"></image></view>
				<view :class="index == 1 ? 'tab_container_btn_text' : ''">元</view>
			</view>
			<view class="tab_container_btn" @click="go_page(url.kldURL)">
				<view v-if="index == 2"  class="tab_container_btn_img"><image src="./img/list_active.png" mode="widthFix"></image></view>
				<view v-else class="tab_container_btn_img"><image src="./img/list.png" mode="widthFix"></image></view>
				<view :class="index == 2 ? 'tab_container_btn_text' : ''">识</view>
			</view>
			<view class="tab_container_btn" @click="go_page(url.myURL)">
				<view v-if="index == 3"  class="tab_container_btn_img"><image src="./img/user_active.png" mode="widthFix"></image></view>
				<view v-else class="tab_container_btn_img"><image src="./img/user.png" mode="widthFix"></image></view>
				<view  :class="index == 3 ? 'tab_container_btn_text' : ''">吾</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			url: {
				type: Object,
				default(){
					return {};
				}
			},
			index: {
				type: [Number, String],
				default: '1'
			}
		},
		created() {
			console.log(this.url)
		},
		data(){
			return {}
		},
		methods:{
			go_page(url){
				this.$Router.push(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_container{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
	}
	.tab_container_btn_box{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		color: #666;
		padding: 20rpx 90rpx;
		font-size: 24rpx;
		.tab_container_btn{
			text-align: center;
			.tab_container_btn_img{
				uni-image{
					width: 40rpx;
				}
			}
			.tab_container_btn_text{
				color: #1296db;
			}
		}
	}
</style>
